<template>
  <nav class="nav">
    <a class="cursor-pointer"><Logo /></a>
    <ul class="topText">
      <li class="hover:(text-light-blue-400 cursor-pointer)" v-for="name of topList" :key="name">{{name}}</li>
    </ul>
    <div class="search">
      <SearchInput />
      <i class="iconfont icon-user !text-2xl cursor-pointer"></i>
      <i class="iconfont icon-cart !text-2xl cursor-pointer"></i>
    </div>
  </nav>
</template>

<script setup lang="ts">
  import Logo from './Logo.vue';
  import SearchInput from './SearchInput.vue'

  const topList = [
    "手机",
    "Lipro",
    "配件",
    "FANDAER",
    "Flyme",
    "服务",
    "社区",
    "企业服务",
    "APP下载"
  ];
</script>

<style lang="scss">
  .nav {
    @apply py-3 text-sm lg:(py-7 w-80vw mx-10vw);
    width: 100%;
    color: #333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    z-index: 1;

    .topText {
      @apply hidden lg: (flex ml-30);
      justify-content: space-around;
      flex: 1;
    }

    .search {
      @apply ml-3;
      width: 220px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
